import { Component, createRef } from "react";

interface IProps {
  list: string[];
}

export default class ScrollingList extends Component<IProps> {
  listRef = createRef<HTMLDivElement>();

  // getSnapshotBeforeUpdate(prevProps, prevState) {
  //   // 我们是否在 list 中添加新的 items ？
  //   // eslint-disable-next-line no-irregular-whitespace
  //   // 捕获滚动​​位置以便我们稍后调整滚动位置。

  //   if (prevProps.list.length < this.props.list.length) {
  //     const list = this.listRef.current;
  //     return list.scrollHeight - list.scrollTop;
  //   }
  //   return null;
  // }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
    // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
    //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
    // if (snapshot !== null) {
    //   const list = this.listRef.current;
    //   list.scrollTop = list.scrollHeight - snapshot;
    // }

    const list = this.listRef.current;
    list.scrollTop = list?.scrollHeight;
  }

  render() {
    return (
      <div
        ref={this.listRef}
        style={{ border: "1px solid #000", height: 100, overflowY: "auto" }}
      >
        {this.props.list.map((item, index) => (
          <div key={index} style={{ height: 50, lineHeight: "50px" }}>
            {item}
          </div>
        ))}
      </div>
    );
  }
}
